<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房源管理</title>
    <script src="../../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../res/js/login_common.js" charset="utf-8"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../res/js/Tools.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <style type="text/css">
        .fonts {
            line-height: 40px;
        }

        .deletes {
            width: 60px;
            height: 40px;
            /*border:1px solid;*/
            float: right;
            color: #0aafe6;
        }

        .deletes:hover {
            cursor: pointer;
            color: #bd2c00
        }

        .select {
            width: 100%;
            position: fixed;
            z-index: 999;
            background: white;
        }
    </style>
</head>
<body style="padding: 10px">
<form class="layui-form" action="">
    <div class="select">
        <div class="layui-inline">
            <label class="layui-form-label">创建日期</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date" lay-verify="date" placeholder="开始时间" autocomplete="off"
                       class="layui-input" style="width: 150px">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date1" lay-verify="date" placeholder="结束时间" autocomplete="off"
                       class="layui-input" style="width: 150px">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">搜索关键字</label>
            <div class="layui-input-inline">
                <input type="text" name="houseName" id="houseName" lay-verify="date" placeholder="请输入关键字"
                       autocomplete="off"
                       class="layui-input" style="width: 150px">
            </div>
        </div>

        <div class="layui-input-inline">
            <label class="layui-form-label">
                <input type="button" class="layui-btn layui-btn-normal" id="isAll" value="查询">
            </label>
        </div>
    </div>
</form>
<div style="margin-top: 97px">

</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<div id="TenementStreet">
    <!--<div style="font-size: 30px;margin-left: 100px">
        <div style="float: right;color: #0aafe6;:hover{cursor:pointer;color: #bd2c00}" onclick="deleteStreet()">删除</div>
        <div>用户名称</div>
        <div style="font-size: 25px;margin-top: 10px">内容</div>
        <div style="float: right;">2020-06-17</div>
        <hr>
    </div>-->
</div>

<script type="text/html" id="state">
    <a href="tel://{{d.housePhone}}" style="color: #00aeff">{{d.housePhone}}</a>
</script>

<script type="text/html" id="states">
    {{#
    if(d.createdPhone){
    }}
    <a href="tel://{{d.createdPhone}}" style="color: #00aeff">{{d.createdPhone}}</a>
    {{#
    }
    }}
</script>

<script type="text/html" id="shelveDay">
    {{#
    if(d.shelveDay){
    }}
    <p><span style="color: red">{{d.shelveDay}}</span>天</p>
    {{#
    }
    }}
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="see">跟进</a>
    <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
    {{# if( window.loginObj.manager.userType < 2 ) { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>
<!--
<script type="text/html" id="sex">
    {{# if( d.clientSex == 0 ) { }}
    <p style="color: #ac2925">女</p>
    {{# }else if( d.clientSex == 1 ){ }}
    <p style="color: #00aced">男</p>
    {{# } }}
</script>

<script type="text/html" id="payment">
    {{# if( d.clientPayment == 0 ) { }}
    <p>现金</p>
    {{# }else if( d.clientPayment == 1 ){ }}
    <p>支付宝</p>
    {{# }else if( d.clientPayment == 2 ){ }}
    <p>微信</p>
    {{# }else if( d.clientPayment == 3 ){ }}
    <p>银行卡</p>
    {{# } }}
</script>

<script type="text/html" id="state">
    {{# if( d.clientState == 1 ) { }}
    <p style="color: #00aced">已支付</p>
    {{# }else if( d.clientState == 0 ){ }}
    <p style="color: #ac2925">未支付</p>
    {{# } }}
</script>
-->

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn" lay-event="update">修改</button>
    {{# if( window.loginObj.manager.userType < 2 ) { }}
        <button class="layui-btn layui-btn-danger" lay-event="delete">批量删除</button>
    {{# } }}
        <button class="layui-btn layui-btn-normal" lay-event="add">新增</button>
    </div>
</script>

<script>
    var table2;
    layui.use(['form', 'table', 'layedit', 'laydate'], function () {
        var table = layui.table
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , form = layui.form;
        table2 = table.render({
            elem: '#test'
            , url: '../../houseAction/findAll'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , title: '房屋信息管理'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {type: 'numbers', title: '序列', fixed: 'left'}
                , {field: 'userId', title: '编号', width: 100}
                , {field: 'userName', title: '房源地址', width: 100}
                , {field: 'sectorName', title: '区域名称', width: 100}
                , {field: 'houseArea', title: '面积', width: 100}
                , {field: 'housePrice', title: '价格', width: 120}
                , {
                    field: 'housePhone', title: '房东电话', width: 150, templet: function (row) {
                        return clientPhones(row.housePhone);
                    }
                }
                , {field: 'createdPhone', title: '录入人电话', width: 150, toolbar: '#states'}
                , {
                    field: 'deadline', title: '最后跟进日期', width: 160, templet: function (row) {
                        if (row.deadline) {
                            return dateFormat("yyyy-MM-dd hh:mm:ss", new Date(row.deadline));
                        } else {
                            return "暂无跟进信息";
                        }
                    }
                }
                , {field: 'shelveDay', title: '未跟进天数', width: 100, toolbar: '#shelveDay'}
                , {field: 'houseParticular', title: '备注', width: 150}
                , {field: 'createdBy', title: '创建人', width: 150}
                , {
                    field: 'createdTime', title: '创建时间', width: 170, templet: function (row) {
                        return dateFormat("yyyy-MM-dd hh:mm:ss", new Date(row.createdTime));
                    }
                }
                , {field: 'updatedBy', title: '更新人', width: 150}
                , {
                    field: 'updatedTime', title: '更新时间', width: 170, templet: function (row) {
                        if (row.updatedTime) {
                            return dateFormat("yyyy-MM-dd hh:mm:ss", new Date(row.updatedTime));
                        } else {
                            return "";
                        }
                    }
                }
                //,{field:'isva', title:'状态', width:150,toolbar:'#isva', width:100}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]]
            , page: true
        });

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        $("#isAll").on("click", function () {
            table2.reload({
                where: {
                    startDate: $("#date").val(),
                    endDate: $("#date1").val(),
                    userName: $("#houseName").val()
                },
                page: {
                    curr: 1
                }
            })
        });

        $('#houseName').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                event.preventDefault();
                //回车执行查询
                $('#isAll').click();
            }
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(test)', function (obj) {
            var data = obj.data;

            var url = "../../streetAction/findAll";

            $.post(url, {sectorId: data.houseId, streetName: "1"}, function (obj) {
                $("#TenementStreet").html("");
                $.each(obj, function (index, item) {
                    console.info(window.loginObj.manager.userType)
                    $("#TenementStreet").append('<div style="font-size: 20px;margin-left: 100px;margin-right: 50px"><div>' + item.userName + '</div><div style="font-size: 15px;margin-top: 10px">' + item.sectorName + '</div><div style="float: right;font-size: 20px">' + dateFormat("yyyy-MM-dd hh:mm:ss", new Date(item.createdTime)) + '</div><hr></div>');
                })
            }, "json");
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            /*
                        layer.alert(JSON.stringify(data), {
                            title: '当前行数据：'
                        });*/
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('rowDouble', function (obj) {
            layer.open({
                type: 2,
                title: '跟进',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['90%', '90%'],
                content: 'houseShow.html?houseId=' + obj.data.houseId
            });
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id); //获取选中的数据
                switch (obj.event) {
                    case 'add':
                        layer.msg('添加');
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        layer.msg('录入数据');
                        layer.open({
                            type: 2,
                            title: '增加操作',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['90%', '90%'],
                            content: 'houseFrom.html'
                        });
                        break;
                    case 'update':
                        var data = checkStatus.data;
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            //layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                            //layer.alert(JSON.stringify(data));
                            //layer.msg('录入数据');
                            layer.open({
                                type: 2,
                                title: '操作',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['90%', '90%'],
                                content: 'houseFrom.html?houseId=' + data[0].houseId
                            });
                        }
                        break;
                    case 'delete':
                        var data = checkStatus.data;
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            //询问框
                            layer.confirm('是否删除数据?', {
                                btn: ['确定', '取消'] //按钮
                            }, function () {
                                var ids = [];
                                var data = checkStatus.data;
                                for (var i = 0; i < data.length; i++) {
                                    ids.push(data[i].houseId);
                                }
                                var url = "../../houseAction/deleteAll";
                                var datas = {"ids": ids};
                                $.post(url, datas, function (obj) {
                                    if (obj.num == 1) {
                                        table2.reload();
                                        layer.msg('删除成功', {icon: 1});
                                    } else {
                                        layer.msg("删除失败")
                                    }
                                });
                            }, function () {


                            })
                        }
                        break;

                }
            }
        );
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var url = "../../houseAction/deleteById";
                    var datas = {"id": data.houseId}
                    $.post(url, datas, function (obj) {
                        if (obj.num == 1) {
                            table2.reload();
                            layer.msg('删除成功', {icon: 1});
                        } else {
                            layer.msg("删除失败")
                        }
                    }, "json")
                });
            } else if (obj.event === 'see') {
                layer.open({
                    type: 2,
                    title: '跟进',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    content: 'houseShow.html?houseId=' + data.houseId
                });
            } else if (obj.event === 'edit') {
                layer.msg('编辑操作');
                layer.open({
                    type: 2,
                    title: '操作',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    content: 'houseFrom.html?houseId=' + data.houseId
                });
            }
        });
    });

    function clientPhones(clientPhone) {
        var phone = clientPhone.substr(0, 3);
        var backphone = clientPhone.substr(7, 4);
        return phone + "****" + backphone;
    }
</script>
</body>
</html>